<template>
	<div id="app">
		<img src="@/assets/images/user.png" />
		
		<div class="section_title">路由示例</div>
		<ul class="change_box flex_box flex_center">
			<li class="mr20" @click="showPages('home')">首页</li>
			<li @click="showPages('login')">登陆页</li>
		</ul>
		<div class="switch_box flex_box flex_center">
			<router-view/>
		</div>
	</div>
</template>

<script>
	import router from './router/index.js'
	import home from '../../components/home.vue'
	import login from '../../components/login.vue'
	import store from './store/index.js'
	export default {
		name: 'app',
		components: {
			home: home,
			login: login
		},
		methods: {
			showPages (name){
				router.push({'name': name})
			}
		},
		mounted() {
			console.log(store.getters.getCount)
		}
	}
</script>

<style lang="scss">
	.section_title {
		border-bottom: 1px dashed;
		text-align: center;
		font-size: 18px;
		line-height: 30px;
	}
	.change_box li {
		background: #2196F3;
		width: 100px;
		line-height: 30px;
		text-align: center;
		border-radius: 4px;
		color: #fff;
	}
	.switch_box {
		height: 100px;
		background: #CDDC39;
	}
</style>
